<template>
  <div class="calc-tag">
    <el-tag size="mini" type="primary" :effect="!currentTag ? 'dark' : 'light'" style="margin:2px;cursor:pointer"  @click="onTagClick()" v-show="calcTags.length">
      全部 
    </el-tag>
    <el-tag size="mini" type="primary" style="margin:2px;cursor:pointer" 
      v-for="(tag, index) in calcTags" 
      :key="`calctag_${index}`" 
      :title="tag.desc" 
      @click="onTagClick(tag)"
      :effect="currentTag && currentTag.id === tag.id ? 'dark' : 'light'"
    >
      {{tag.label}} ({{tag.count}})
    </el-tag>
  </div>
</template>
<script>
// import {groupArticleByTag} from '$my/code/api/article' 
export default {
  components: {},
  props: {
    fetchFn: {
      type: Function
    }
  },
  data() {
    return {
      currentTag: null,
      calcTags: [] 
    }
  },
  computed: {
  },
  methods: {
    getGroupCount() {
      if (!this.fetchFn) return
      // groupArticleByTag
      this.fetchFn().then((res) => { 
        const countList = res.countList
        const tagList = res.tagList

        this.calcTags = countList.map((item) => {
          const target = tagList.find((tag) => {
            return tag.id === item._id
          }) 
          return {
            ...target,
            count: item.count
          }
        }).sort((a, b) => {
          return b.count - a.count
        })
        // console.log(this.calcTags)
      })
    },
    onTagClick(tag) {
      this.currentTag = tag || null
      this.$emit('on-tagClick', tag)
    }
  },
  created() {
  },
  mounted() {
    this.getGroupCount()
  }
}
</script>
<style lang="scss" scoped>
</style>